//后台配置/数据配置
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Cascader, Button, Input, Icon, Divider, Table, InputNumber, Popconfirm, Form, Pagination, Checkbox, DatePicker } from 'antd';
import styles from './VideoHistory.less';
import update from 'immutability-helper';
//引入字体图标组件

import request from '../../utils/request';
import PublicService from '../../services/PublicService';
import { Row, Col, Collapse, message } from 'antd';
import { DragDropContext } from 'react-dnd';
import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
import Dustbin from './component/Dustbin';
import moment from 'moment';
import Box from './component/Box';
import Filt from './component/Filt';






const Panel = Collapse.Panel;

class VideoHistory extends Component {
  state = {
    width: '100%',
    num: 24,
    height: '73vh',
    video: '70vh',
    title: "",
    dustbins: [
      { accepts: ['true'], open: false, padding: '0 1vw 0 1vw', marginTop: '1.5vh' },
    ],
    boxes: [
      {
        title: '项目部',
        sub: [
          { name: '场地东南侧', type: 'true', url: 'cddnc', cameraCode: 'cddnc' },
          { name: '水处理东侧', type: 'true', url: 'scldc', cameraCode: 'scldc' },
          { name: '清水池', type: 'true', url: 'qsc', cameraCode: 'qsc' },
          { name: '场地西南侧', type: 'true', url: 'cdxnc', cameraCode: 'cdxnc' },
          { name: '大门枪机', type: 'true', url: 'dmqj', cameraCode: 'dmqj' },
          { name: '项目部球机', type: 'true', url: 'xmbqj', cameraCode: 'xmbqj' }
        ],
      },
      {
        title: '项目现场',
        sub: [
          { name: '硫酸储罐', type: 'true', url: 'lscg', cameraCode: 'lscg' },
          { name: '场地西北侧', type: 'true', url: 'cdxc', cameraCode: 'cdxc' },
          { name: '水处理', type: 'true', url: 'scl', cameraCode: 'scl' },
          { name: '水处理2', type: 'true', url: 'scl2', cameraCode: 'scl2' },
          { name: '东侧大门', type: 'true', url: 'dcdm', cameraCode: 'dcdm' },
          { name: '污水池', type: 'true', url: 'wsc', cameraCode: 'wsc' }
        ],
      }

    ],
    droppedBoxNames: [],
    loading: false,
    options: [],
    toggle: false,
    playUrl: '',
  };
  componentDidMount() {
    let t = this;
    t.setState({
      loading: true,
    });

    t.onSearch();
  }

  isDropped(boxName) {
    return this.state.droppedBoxNames.indexOf(boxName) > -1;
  }
  //鼠标松开事件
  /**
   *  参数(@index 容器的下标  @item 拖动的name  @box 携带播放所需的信息)
   **/
  handleDrop(index, item, box) {
    console.log(index, item, box)
    let t = this;
    t.setState({
      toggle: true,
      title: item.name
    });
    /*
    * 此处t.setState执行两个参数，t.setState(update(this.state,{}),()=>{})
    * 第一个参数用于关闭播放器
    * 第二个参数用于开启播放器并更新播放的相关信息
    * update 扩展不变的数据（immutability-helper） 可参考github地址:https://github.com/kolodny/immutability-helper
    * {$set: any} 直接赋值覆盖
    * {$push: array} 数组中的push()语法
    * */
    t.setState(
      update(this.state, {
        dustbins: {
          [index]: {
            open: {
              $set: false,
            }
          },
        }
      }),
      () => {
        const { name } = item;
        let url = '';
        for (let i = 0; i < box.length; i++) {
          box[i].sub.map(item => {
            if (item.name === name) {
              url = item.url
            }
          })
        }
        const droppedBoxNames = name ? { $push: [name] } : {};
        this.setState(
          update(this.state, {
            dustbins: {
              [index]: {
                name: {
                  $set: name,
                },
              },
            },
            droppedBoxNames,
            playUrl: {
              $set: url
            },
          }),
        )
      }
    )
  }
  //查询
  onSearch() {
    console.log("查询")
  }
  //播放
  onPlay() {
    let t = this;
    t.f1.getForm().validateFields((err, value) => {
      if (!err) {
        let playUrl = t.state.playUrl;
        let startTime = moment(moment(value.playTime[0]).format('YYYY-MM-DD HH:mm:ss')).diff(0);
        let endTime = moment(moment(value.playTime[1]).format('YYYY-MM-DD HH:mm:ss')).diff(0);
        console.log(startTime, endTime, playUrl)

        request({
          url: `/web/redstar/visCamera/getHisVideoUrlByCode?cameraCode=${playUrl}&startTime=${startTime}&endTime=${endTime}`,
          method: 'GET',
        }).then(data => {
          if (data.rc === 0) {

            this.setState(
              update(this.state, {
                dustbins: {
                  [0]: {
                    lastDroppedItem: {
                      $set: data.ret,
                    },
                    open: {
                      $set: true,
                    }
                  },
                },
              }),
            )

          }
        })

      }
    })
  }
  render() {
    let t = this;
    const { boxes, dustbins, options } = t.state;
    function disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day');
    }
    
    const items = [
      {
        type: 'rangePicker',
        label: '播放时间',
        paramName: 'playTime',
        disabledDate:{disabledDate},
        // disabledTime:{disabledRangeTime},
        showTime: [{
          hideDisabledOptions: true,
          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
        }],
        format: 'YYYY-MM-DD HH:mm:ss',
        toggle: t.state.toggle
      }, {
        type: 'play',
        toggle: t.state.toggle
      }
    ]

    return (
      <div>

        <Filt key="Filt" items={items} ref={ref => t.f1 = ref} submit={t.onSearch.bind(t)} play={t.onPlay.bind(t)} title={this.state.title} />


        <Row gutter={12} style={{ overflow: 'hidden', clear: 'both', height: '81.5vh', marginTop: "2vh" }}>
          <Col xs={20} sm={20} md={20} lg={20} xl={20}>
            <div className={styles['wp-video']} style={{ overflow: 'hidden', clear: 'both' }}>
              <Row style={{ marginTop: '10px' }}>
                <Col span={2}>
                  <div className={styles.blueBlock}><i></i><span>历史监控</span></div>
                </Col>
              </Row>
              <Row>
                {
                  dustbins.map(({ accepts, lastDroppedItem, name, padding, marginTop, open }, index) => (
                    <Col key={index} md={t.state.num} lg={t.state.num} xl={t.state.num}>
                      <Dustbin
                        key={index}
                        load={t.state.load}
                        name={name}
                        open={open}
                        padding={padding}
                        marginTop={marginTop}
                        accepts={accepts}
                        lastDroppedItem={lastDroppedItem}
                        width={t.state.width}
                        height={t.state.height}
                        video={t.state.video}
                        onDrop={item => this.handleDrop(index, item, t.state.boxes)}
                      />
                    </Col>
                  ))
                }
              </Row>
            </div>
          </Col>
          <Col xs={4} sm={4} md={4} lg={4} xl={4}>
            <div className={styles['wp-video']}>
              <div className={styles.blueBlock} style={{ paddingTop: '10px' }}><i></i><span>视频列表</span></div>
              <Row>
                <div style={{ height: '50vh', overflow: 'auto', marginTop: '10px' }}>
                  <Collapse defaultActiveKey={['1']} bordered={false} accordion >
                    <Panel header="项目部" key="1" style={{ border: 0, color: '#1A1A1A', fontSize: '14px', fontWeight: 'bold', }}>
                      {
                        boxes[0].sub.map(({ name, type, url }, index) => (
                          <Box
                            key={index}
                            name={name}
                            type={type}
                            isDropped={this.isDropped(type)}
                          />
                        ))
                      }
                    </Panel>
                    <Panel header="项目现场" key="2" style={{ border: 0, color: '#1A1A1A', fontSize: '14px', fontWeight: 'bold', }}>
                      {
                        boxes[1].sub.map(({ name, type, url }, index) => (
                          <Box
                            key={index}
                            name={name}
                            type={type}
                            isDropped={this.isDropped(type)}
                          />
                        ))
                      }
                    </Panel>

                  </Collapse>
                </div>
              </Row>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
  };
}
export default connect(mapStateToProps)(DragDropContext(HTML5Backend)(VideoHistory));